import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useImperativeHandle, useRef, useState, useCallback, } from "react";
import { templateListApi } from "./service";
import { Popup, DataGrid, Button } from "devextreme-react";
import { Column } from "devextreme-react/data-grid";
import notify from "devextreme/ui/notify";
import CloudTemplatePopup from "./CloudTemplatePopup";
import { LoadPanel } from "devextreme-react/load-panel";
const ChangeTemplatePopup = React.forwardRef((props, ref) => {
    const { changeData, title } = props;
    const [visible, setVisible] = useState(false);
    const [devTableData, setDevTableData] = useState([]);
    const devGridRef = useRef();
    const CloudPopupRef = useRef();
    const [loadPanelVisible, setLoadPanelVisible] = useState(false);
    const [selectData, setSelectData] = useState({});
    const [selectedLeftData, setSelectedLeftData] = useState([]);
    const getTempleteList = async (selData) => {
        setLoadPanelVisible(true);
        const res = await templateListApi();
        if (res.success) {
            setDevTableData(res.data.filter((a) => a.tempType ===
                (changeData?.cloudTempType === "合并系统模板"
                    ? changeData?.cloudTempType
                    : "报告系统模板")));
            const findTemp = res.data.findIndex((item) => {
                return selData === item.tempName;
            });
            const tempIndex = findTemp >= 0 ? findTemp : 0;
            setSelectedLeftData([res.data[tempIndex].id]);
            setSelectData(res.data[tempIndex]);
        }
        else {
            notify(`${res.msg}`, "error", 2000);
        }
        setLoadPanelVisible(false);
    };
    // 自定义方法
    useImperativeHandle(ref, () => ({
        showTemplate: (rowData) => {
            getTempleteList(rowData.templateName);
            setVisible(true);
        },
    }));
    const onSelectionData = useCallback(({ selectedRowsData }) => {
        if (selectedRowsData[0]) {
            console.log(selectedRowsData, "@@@");
            setSelectData(selectedRowsData[0]);
            setSelectedLeftData([selectedRowsData[0].id]);
        }
    }, [selectData]);
    const closePopup = () => {
        setVisible(false);
        setDevTableData([]);
        setSelectData({});
        setSelectedLeftData([]);
    };
    return (_jsxs(_Fragment, { children: [_jsxs(Popup, { ref: ref, title: title || "切换模板", dragOutsideBoundary: true, resizeEnabled: true, visible: visible, width: 650, height: 500, ...props, onHiding: () => {
                    props?.cancelCallback();
                    closePopup();
                }, children: [_jsxs("div", { style: {
                            display: "flex",
                            flexDirection: "row-reverse",
                            marginBottom: "8px",
                        }, children: [_jsx(Button, { type: "default", className: "defaultBtn", onClick: async () => {
                                    // notify('功能正在开发', 'warning', 2000);
                                    CloudPopupRef.current.showTemplate();
                                }, text: "\u4E91\u7AEF\u4E0B\u8F7D" }), _jsx(Button, { className: "defaultBtnWhite", onClick: async () => {
                                    if (!selectData.tempName)
                                        return notify("请选择模板名称！", "warning", 2000);
                                    const tempName = selectData.tempName;
                                    props?.okCallback(tempName);
                                    closePopup();
                                    // if (!selectData.tempName)
                                    //   return notify("请选择模板名称！", "warning", 2000);
                                    // setLoadPanelVisible(true);
                                    // const res: any = await templateInitApi({
                                    //   dbname,
                                    //   templateName: selectData.tempName,
                                    //   type,
                                    //   tableNames: changeData?.tableNames ?? [],
                                    //   dateId: changeData?.dateId ?? "",
                                    // });
                                    // if (res.success) {
                                    //   if (changeData.cloudTempType) {
                                    //     setLoadPanelVisible(false);
                                    //     window.location.reload();
                                    //   } else {
                                    //     notify(`模板名称不能为空！`, "error", 2000);
                                    //   }
                                    // } else {
                                    //   notify(`${res.msg}`, "error", 2000);
                                    // }
                                }, text: "\u4F7F\u7528\u8BE5\u6A21\u677F" })] }), _jsx(LoadPanel, { shadingColor: "rgba(0,0,0,0.4)", visible: loadPanelVisible }), _jsx("div", { style: {
                            width: "100%",
                            height: "calc(100% - 50px)",
                        }, children: _jsxs(DataGrid, { height: "100%", width: "100%", dataSource: devTableData, keyExpr: "id", className: "PaperDevSortableGrid devHeadersCenter", ref: devGridRef, showBorders: true, showRowLines: true, showColumnLines: true, scrolling: { rowRenderingMode: "virtual" }, selection: {
                                mode: "single",
                            }, selectedRowKeys: selectedLeftData, onSelectionChanged: onSelectionData, paging: {
                                enabled: false,
                            }, groupPanel: {
                                visible: false,
                            }, children: [_jsx(Column, { caption: "\u5E8F\u53F7", alignment: "center", width: 70, cellRender: (row) => {
                                        const { data, rowIndex } = row;
                                        return _jsx("div", { children: rowIndex + 1 });
                                    } }), _jsx(Column, { caption: "\u6A21\u677F\u540D\u79F0", dataField: "tempName", alignment: "left", dataType: "string" }), _jsx(Column, { width: 90, caption: "\u62A5\u544A\u7C7B\u578B", dataField: "reportType", alignment: "left", dataType: "string" })] }) })] }), _jsx(CloudTemplatePopup, { ref: CloudPopupRef, cloudData: {
                    cloudTempType: changeData.cloudTempType,
                    localTempTypeList: devTableData,
                }, reloadTable: () => {
                    getTempleteList(selectData.tempName);
                } })] }));
});
export default ChangeTemplatePopup;
